import React,{Component} from "react";
import {Space, Table,Button} from "antd";
import EditUser from "./editUser";

export interface IUser {
    name : string
    id : number
}

interface IState {
    userList: IUser[]
    visible : boolean
    user ?:IUser
}

export default class UserList extends Component<any, IState>{

    constructor(props: any, context: any) {
        super(props, context);
        let userlist : IUser[] = []
        for (let i =0; i<100;i++){
            userlist.push({
                id:i,
                name:"user"+i
            })
        }
        this.state = {
            userList :userlist,
            visible : false
        }
    }

    show =(visible : boolean, user ?: IUser) =>{
        this.setState({
            visible : visible,
            user : user,
            userList : this.state.userList.map((u,_)=>{
                if (user ?.id === u.id){
                    return user
                }else{
                    return u
                }
            })
        })
    }

    render() {
        return (
            <div>
                <EditUser visible={this.state.visible}  callback={this.show} user={this.state.user}/>
                <Table dataSource={this.state.userList} rowKey="id">
                    <Table.Column title={"ID"} dataIndex="id" />
                    <Table.Column title={"姓名"} dataIndex="name" />
                    <Table.Column
                        title={"管理"}
                        render = {(user: IUser) =>(
                            <Space>
                                <Button type="primary" onClick={
                                    ()=>{
                                        this.show(true,user)
                                    }
                                }>编辑</Button>
                            </Space>
                        )} />
                </Table>
            </div>
        )
    }
}
